<template>
	<view>
		<uni-section title="共享设备" type="line" padding>
			<view class="grid-dynamic-box">
				<uni-grid :column="3" :highlight="true">
					<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
						<navigator :url="item.url" hover-class="none">
							<view class="grid-item-box" style="{'backgroundColor':item.color}">
								<!-- <uni-icons type="image" :size="30" color="#777" /> -->
								<text class="text1">{{ item.text }}</text>
							</view>
						</navigator>
					</uni-grid-item>
				</uni-grid>
			</view>
		</uni-section>

		<uni-section title="私有设备" type="line" padding>
			<!-- <navigator url="/pages/personal/personal" hover-class="none"> -->
			<uni-grid :column="3" :highlight="true">
				<uni-grid-item v-for="(item, index) in dynamicList" :index="index" :key="index"
					@click="goToDetail(item.key)">
					<view class="grid-item-box" :style="{'backgroundColor':item.color}">
						<text class="text">{{ item.text }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>


			<!-- </navigator> -->


			<button type="primary" style="margin-top: 15px;" @click="add">添加一个设备</button>
			<button v-if="dynamicList.length !== 0" type="primary" style="margin-top: 15px;" @click="del">删除设备</button>
			<button type="default" plain="true" style="margin-top: 15px;" @tap="modalTap"
				@click="longshock">报警按钮</button>
		</uni-section>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				dynamicList: [],
				list: [{
						key: 'device1',
						text: '设备 1',
						url: '/pages/personal/personal'
					},
					{
						key: 'device2',
						text: '设备 2',
						url: '/pages/personal/personal'
					},
					{
						key: 'device3',
						text: '设备 3',
						url: '/pages/personal/personal'
					},
					{
						key: 'device4',
						text: '设备 4',
						url: '/pages/personal/personal'
					},
					{
						key: 'device5',
						text: '设备 5',
						url: '/pages/personal/personal'
					},
					{
						key: 'device6',
						text: '设备 6',
						url: '/pages/personal/personal'
					},
					{
						key: 'device7',
						text: '设备 7',
						url: '/pages/personal/personal'
					},
					{
						key: 'device8',
						text: '设备 8',
						url: '/pages/personal/personal'
					},
					{
						key: 'device9',
						text: '设备 9',
						url: '/pages/personal/personal'
					},
					// 依此类推，为每个设备添加不同的text和url
				]
			}
		},

		mounted() {
			// 监听infoSaved事件
			uni.$on('infoSaved', this.updateInfo);
		},
		beforeDestroy() {
			// 移除监听器，防止内存泄漏
			uni.$off('infoSaved', this.updateInfo);
		},

		methods: {
			goToDetail(key) {
				uni.navigateTo({
					url: `/pages/personal/personal?key=${key}`
				});
			},
			updateInfo({ key,baseFormData }) {
				// 根据key找到对应的宫格并更新其显示的文本
				const item = this.list.find(item => item.key === key);
				if (item) {
					item.text = `姓名：${baseFormData.name}, 年龄：${baseFormData.age}`; // 或者你可以选择显示部分信息
				}
			},
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++

				uni.showToast({
					title: `点击第${index+1}个设备`,
					icon: 'none'
				})
			},
			add() {
				if (this.dynamicList.length < 99) {
					this.dynamicList.push({
						// url: `/static/c${this.dynamicList.length+1}.png`,
						text: `设备 ${this.dynamicList.length+1}`,
						color: this.dynamicList.length % 2 === 0 ? '#f5f5f5' : "#fff"
					})
				} else {
					uni.showToast({
						title: '最多添加99个',
						icon: 'none'
					});
				}
			},
			del() {
				this.dynamicList.splice(this.dynamicList.length - 1, 1)
			},
			modalTap: function(e) {
				uni.showModal({
					title: "报警提示",
					content: "xxx按下了报警按钮",
					showCancel: false,
					confirmText: "确定"
				})
			},
			longshock() {
				uni.vibrateLong({
					success: function() {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.add-item {
		padding: 40rpx;
		width: 120rpx;
		height: 120rpx;
	}

	.grid-dynamic-box {
		margin-bottom: 10px;
	}

	.text {
		font-size: 28rpx;
		// margin-top: 30%;
	}

	.text1 {
		font-size: 28rpx;
		margin-top: 30%;
	}

	.grid-item-box {
		flex: 3;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
</style>